<!--
 * @Author: ShengXD <1519256482@qq.com>
 * @Date: 2024-11-07 13:12:13
 * @LastEditors: ShengXD <1519256482@qq.com>
 * @LastEditTime: 2024-11-08 16:33:46
 * @FilePath: /zonmind-om/apps/web-antd/src/views/system/explanation/modal.vue
 * @Description: 
-->
<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { useVbenForm, useVbenModal } from '@vben/common-ui';

const formData = ref();
const title = ref();

const handleSubmit = () => {
  console.info('handleSubmit');
};

const [Form, formApi] = useVbenForm({
  handleSubmit: handleSubmit,
  wrapperClass: 'grid-cols-4',
  layout: 'horizontal',
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    hideRequiredMark: true,
  },
  schema: [],
  handleReset: () => {
    // formApi.resetForm()
    // props.handleSearch();
  },
});

const [Modal, modalApi] = useVbenModal({
  onCancel() {
    modalApi.close();
  },
  onOpened() {
    formApi.setState(() => ({
      schema: [
        {
          component: 'VbenSelect',
          componentProps: {
            options: [],
            placeholder: '请选择父级',
          },
          fieldName: 'parentId',
          label: '父级',
        },
        {
          component: 'VbenInput',
          componentProps: {
            placeholder: '请输入页面标识',
          },
          fieldName: 'pageIdentity',
          label: '页面标识',
        },
        {
          component: 'VbenInput',
          componentProps: {
            placeholder: '请输入菜单名称',
          },
          fieldName: 'menuName',
          label: '菜单名称',
        },
      ],
    }));
  },
  onConfirm() {
    console.info('onConfirm');
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      formData.value = modalApi.getData<{
        data: { record: TypeRecord };
      }>().data.record;
      title.value = modalApi.getData<{ data: { isEdit: boolean } }>().data
        .isEdit
        ? '编辑菜单'
        : '新增菜单';
    }
  },
});

</script>
<template>
  <Modal :title="title">
    <Form />
  </Modal>
</template>
